<template>
  <form-dialop
    :title="$t('user.SetTimeSlot')"
    :visible="visible"
    width="30%"
    @handleClose="handleClose"
  >
    <template #content>
      <p style="color: #6F7D96;word-break: keep-all;">{{ $t('user.setTimeSlotTips') }}</p>
      <el-form ref="form" :model="formData" :rules="formRule">
        <el-form-item :label="$t('user.allDay')" prop="">
          <el-checkbox v-model="allDay"></el-checkbox>
        </el-form-item>
        <el-form-item :label="$t('user.StartTime')" prop="start_time">
          <el-time-picker
            v-model="formData.start_time"
            :disabled="allDay"
            :picker-options="{
              start: '00:00',
              step: '00:01',
              end: '24:00'
            }"
            :format="'HH:mm'"
            :value-format="'HH:mm'"
            :placeholder="$t('user.startTimePlaceholder')">
          </el-time-picker>
        </el-form-item>
        <el-form-item :label="$t('user.EndTime')" prop="end_time">
          <el-time-picker
            v-model="formData.end_time"
            :disabled="allDay"
            :picker-options="{
              start: '00:00',
              step: '00:01',
              end: '24:00'
            }"
            :format="'HH:mm'"
            :value-format="'HH:mm'"
            :placeholder="$t('user.endTimePlaceholder')">
          </el-time-picker>
        </el-form-item>
      </el-form>
    </template>
    <template #footer>
      <el-button @click="handleClose">{{ $t('common.cancel') }}</el-button>
      <el-button type="primary" @click="submit" :disabled="loading">{{ $t('common.confirm') }}</el-button>
    </template>
  </form-dialop>
</template>
<script lang="ts">
import Vue from 'vue';
import FormDialop from '../../../components/Dialog/formDialog.vue';
export default Vue.extend({
  props: {
    submitMethod: {
      type: Function,
      default() {
        return () => Promise.resolve();
      }
    }
  },
  components: {
    FormDialop
  },
  data() {
    return {
      visible: false,
      loading: false,
      formData: {
        start_time: "",
        end_time: ""
      },
      allDay: true,
      formRule: {
        start_time: [
          { required: true, message: (this as any).$t('user.startTimeRequired'), trigger: 'blur' }
        ],
        end_time: [
          { required: true, message: (this as any).$t('user.endTimeRequired'), trigger: 'blur' }
        ]
      }
    }
  },
  methods: {
    init(data: any) {
      (this as any).visible = true;
      if(data.length === 1) {
        const timer = JSON.parse(data[0].auth_time_window);

        const start = parseInt(timer.start / 60 as any) + ":" + (timer.start - parseInt(timer.start / 60 as any) * 60);
        const end = parseInt(timer.end / 60 as any) + ":" + (timer.end - parseInt(timer.end / 60 as any) * 60);
        (this as any).formData.start_time = start;
        (this as any).formData.end_time = end;
      }
    },
    submit() {
      let data: any ={}
      if(this.allDay){
        (this as any).loading = true;
        data = {
          start: 0,
          end: 1440
        };
        (this as any).submitMethod(JSON.stringify(data)).then(() => {
          (this as any).handleClose();
        }).finally(() => {
          (this as any).loading = false;
        });
      } else {
        (this as any).$refs.form.validate((valid: any) => {
          if (valid) {
            (this as any).loading = true;
            data = {
              start: parseInt((this as any).formData.start_time.split(":")[0]) * 60 + parseInt((this as any).formData.start_time.split(":")[1]),
              end: parseInt((this as any).formData.end_time.split(":")[0]) * 60 + parseInt((this as any).formData.end_time.split(":")[1])
            };
            (this as any).submitMethod(JSON.stringify(data)).then(() => {
              (this as any).handleClose();
            }).finally(() => {
              (this as any).loading = false;
            });
          }
        });
      }
    },
    handleClose() {
      (this as any).formData = {
        start_time: "",
        end_time: ""
      };
      this.loading = false;
      (this as any).visible = false;
    }
  }
})
</script>

<style lang="scss" scoped>
.el-form-item {
  display: flex;

  .el-form-item__label {
    flex-shrink: 0;
  }

  .el-form-item__content {
    flex-grow: 1;
  }
}
</style>
